<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">th:
<head>
    <title>博客系统网页</title>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <LINK rel="Bookmark" href="favicon.ico">
    <LINK rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" th:src="@{/staticRes/js/html5shiv.js}"></script>
    <script type="text/javascript" th:src="@{/staticRes/js/respond.min.js}"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" th:href="@{plugin/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{plugin/Hui-iconfont/1.0.8/iconfont.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/common.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{plugin/pifu/pifu.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{plugin/wangEditor/css/wangEditor.min.css}">
    <!--[if lt IE 9]>
    <link th:href="@{/staticRes/lib/h-ui/css/H-ui.ie.css}" rel="stylesheet" type="text/css"/>
    <![endif]-->
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    }

    function showSide() {
        $('.navbar-nav').toggle();
    }</script>
</head>
<body>
<div th:replace="~{commons/commons::blogHeader}"></div>

<!--导航条-->
<nav class="breadcrumb">
    <div class="container"><i class="Hui-iconfont">&#xe67f;</i> <a href="/" class="c-primary">首页</a> <span
            class="c-gray en">&gt;</span> <span class="c-gray">文章</span> <span class="c-gray en">&gt;</span> <span th:text="${map.article.title}"
            class="c-gray"></span></div>
</nav>

<section class="container pt-20">

    <div class="row w_main_row">


        <div class="col-lg-9 col-md-9 w_main_left">
            <div class="panel panel-default  mb-20">
                <div class="panel-body pt-10 pb-10">
                    <h2 class="c_titile" th:text="${map.article.title}"></h2>
                    <p class="box_c"><span class="d_time"
                                           th:text="${#dates.format(map.article.createtime,'yyyy-MM-dd HH:mm:ss')}"></span><span>作者：<a
                            href="#" th:text="${map.article.uname}"></a></span><span>阅读<span
                            th:text="${map.article.heat}"></span></span></p>
                    <ul class="infos">
                        <p th:text="${map.article.content}"></p>
                        <p>&nbsp;<img th:src="${map.article.img}" alt="个人舆情监测阿里云空间选择" class="img-responsive lazyload"
                                      width="700" height="434"></p>
                    </ul>

                    <div class="keybq">
                        <p><span>关键字</span>：<a th:href="@{/article(lableId=${map.article.lid})}"
                                               class="label label-default" th:text="${map.article.lname}"></a></p>
                    </div>

                </div>
            </div>

            <div class="panel panel-default  mb-20">
                <div class="tab-category">
                    <a href=""><strong>评论区</strong></a>
                </div>

                <div class="panel-body">
                    <div class="panel-body" style="margin: 0 3%;">
                        <div class="mb-20">
                            <ul class="commentList">

                                <li th:each="comment:${map.commentList}" class="item cl">
                                    <a href="#"><i class="avatar size-L radius"><img alt="" th:src="${comment.img}"></i></a>
                                    <div class="comment-main">
                                        <header class="comment-header">
                                            <div class="comment-meta"><a class="comment-author" href="#"><span th:text="${comment.uname}"></span></a>
                                                <time th:text="${comment.createtime}"  class="f-r"></time>
                                            </div>
                                        </header>
                                        <div class="comment-body">
                                            <p th:utext="${comment.content}"></p>
                                        </div>
                                    </div>
                                </li>

                            </ul>

                        </div>
                        <div class="line"></div>
                        <!--用于评论-->
                        <div class="mt-20" id="ct">
                            <form action="/blog/comment/sendComment">
                                <input name="articleId" type="hidden" th:value="${map.article.id}">
                                <div id="err" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
                                <textarea id="textarea1" name="comment" style="height:200px;"
                                          placeholder="看完不留一发？"> </textarea>
                                <div class="text-r mt-10">
                                    <button type="submit" class="btn btn-primary radius"> 发表评论</button>
                                </div>
                            </form>
                        </div>
                        <!--用于回复-->
                        <div class="comment hidden mt-20">
                            <div id="err2" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
                            <textarea class="textarea" style="height:100px;"> </textarea>
                            <button onclick="hf(this);" type="button" class="btn btn-primary radius mt-10">回复</button>
                            <a class="cancelReply f-r mt-10">取消回复</a>
                        </div>

                    </div>
                </div>
            </div>

        </div>


        <div class="col-lg-3 col-md-3">
            <!--热门推荐-->
            <div class="bg-fff box-shadow radius mb-20">
                <div class="tab-category">
                    <a href=""><strong>热门推荐</strong></a>
                </div>
                <div class="tab-category-item">
                    <ul class="index_recd clickTop">
                        <li th:each="heatArticle:${map.heatArticle}">
                            <a th:href="@{/article_detail(articleId=${heatArticle.id})}"><span
                                    th:text="${heatArticle.title}"></span></a>
                            <p class="hits"><i class="Hui-iconfont" title="点击量">&#xe6c1;</i> <span
                                    th:text="${heatArticle.heat}"></span></p>
                        </li>
                    </ul>
                </div>
            </div>

            <!--图片-->
            <div class="bg-fff box-shadow radius mb-20">
                <div class="tab-category">
                    <a href=""><strong>广告招租</strong></a>
                </div>
                <div class="tab-category-item">
                    <img th:src="@{img/12.jpg}" class="img-responsive lazyload" alt="响应式图片">
                </div>
            </div>

        </div>
    </div>

</section>

<div th:replace="~{commons/commons::blogFooter}"></div>

<script type="text/javascript" th:src="@{plugin/jquery/1.9.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{plugin/layer/3.0/layer.js}"></script>
<script type="text/javascript" th:src="@{plugin/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{plugin/pifu/pifu.js}"></script>
<script type="text/javascript" th:src="@{js/common.js}"></script>
<script> $(function () {
    $(window).on("scroll", backToTopFun);
    backToTopFun();
}); </script>
<script type="text/javascript" th:src="@{plugin/wangEditor/js/wangEditor.min.js}"></script>
<script type="text/javascript">
    $(function () {
        $("img.lazyload").lazyload({failurelimit: 3});

        wangEditor.config.printLog = false;
        var editor1 = new wangEditor('textarea1');
        editor1.config.menus = ['insertcode', 'quote', 'bold', '|', 'img', 'emotion', '|', 'undo', 'fullscreen'];
        editor1.config.emotions = {
            'default': {title: '老王表情', data: 'plugin/wangEditor/emotions1.data'},
            'default2': {title: '老王心情', data: 'plugin/wangEditor/emotions3.data'},
            'default3': {title: '顶一顶', data: 'plugin/wangEditor/emotions2.data'}
        };
        editor1.create();

        //show reply
        $(".hf").click(function () {
            pId = $(this).attr("name");
            $(this).parents(".commentList").find(".cancelReply").trigger("click");
            $(this).parent(".comment-body").append($(".comment").clone(true));
            $(this).parent(".comment-body").find(".comment").removeClass("hidden");
            $(this).hide();
        });
        //cancel reply
        $(".cancelReply").on('click', function () {
            $(this).parents(".comment-body").find(".hf").show();
            $(this).parents(".comment-body").find(".comment").remove();
        });
    });

</script>
</body>
</html>
